<template>
  <div>
    <!-- header -->
    <div class="line-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ name: 'proj' }">项目管理</el-breadcrumb-item>
        <el-breadcrumb-item>区段管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ projState.proj?.name }}</el-breadcrumb-item>
      </el-breadcrumb>

      <el-button type="primary" @click="visible = true">新增</el-button>
    </div>

    <!-- table -->
    <el-table :data="lineState.lines" style="width: 100%" border class="line-table">
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column label="名称" width="" align="center">
        <template #default="scoped">
          <span class="line-name" @click="$router.push({ name: 'image', params: { id: scoped.row.id } })">
            {{ scoped.row.name }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="档距累加" prop="totalSpan" width="100" align="center" />

      <el-table-column prop="start" label="开始塔位" width="180" align="center" />
      <el-table-column prop="end" label="结束塔位" width="180" align="center" />
      <el-table-column label="操作" width="150">
        <template #default="scoped">
          <el-button-group>
            <el-button type="primary" @click="edit(scoped.row)"> 编辑 </el-button>
            <el-button type="danger" @click="delLine(scoped.row)"> 删除 </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <AddLineDialog v-model="visible" :projId="projId" @closed="closed" />
  <EditLineDialog v-model="editVisible" :editLine="editLine" @closed="closed" />
</template>

<script setup lang="ts">
import AddLineDialog from '@/components/line/AddLineDialog.vue'
import EditLineDialog from '@/components/line/EditLineDialog.vue'
import useLineStore from '@/states/useLineStore'
import useProjStore from '@/states/useProjStore'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const projState = useProjStore()
const lineState = useLineStore()
const route = useRoute()

const visible = ref(false)
const editVisible = ref(false)
const editLine = ref<LineDataInter>()
const projId = ref(+route.params.id)

async function closed() {
  await lineState.all({ projId: projId.value })
  visible.value = false
  editVisible.value = false
}

function edit(data: LineDataInter) {
  editVisible.value = true
  editLine.value = data
}

async function delLine(data: LineDataInter) {
  await ElMessageBox.confirm(`是否删除"${data.name}"区段?`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await lineState.del(data.id!)
      ElMessage({
        type: 'success',
        message: '成功删除',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })

  await lineState.all({ projId: projId.value })
}

projState.find(projId.value)
lineState.all({ projId: projId.value })
</script>

<style scoped lang="scss">
.line-header {
  @apply flex justify-between items-center;
}
.line-table {
  @apply mt-5;
  .line-name {
    cursor: pointer;
    padding: 4px 0;
    background-image: linear-gradient(to right, #2c3e50, #2c3e50);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 4px;
    transition: 0.3s;
  }
  .line-name:hover {
    background-size: 100% 4px;
    color: #2c3e50;
  }
}
</style>

<script lang="ts">
export default {
  route: {
    path: '/home/line/:id',
    name: 'line',
  },
}
</script>
